import { BlockNoteView } from "@blocknote/shadcn";
import {
  createReactBlockSpec,
  createReactInlineContentSpec,
  getDefaultReactSlashMenuItems,
  SuggestionMenuController,
  useCreateBlockNote,
  type DefaultReactSuggestionItem
} from "@blocknote/react";
import "@blocknote/shadcn/style.css";
import { zh } from "@blocknote/core/locales";
import {
  BlockNoteSchema,
  defaultBlockSpecs,
  defaultInlineContentSpecs,
  defaultStyleSpecs,
  filterSuggestionItems,
  insertOrUpdateBlock
} from "@blocknote/core";

const schema = BlockNoteSchema.create({
  blockSpecs: {
    ...defaultBlockSpecs,
    blockAI: createReactBlockSpec(
      {
        type: "blockAI",
        content: "none",
        propSchema: {
          id: {
            default: "ai-block"
          },
          title: {
            default: "AI Block"
          },
          description: {
            default: "这是一个AI块的描述."
          },
          content: {
            default: "AI生成的内容"
          }
        }
      },
      {
        render: props => {
          const { id, title, description, content } = props.block.props;
          return (
            <div className="p-4 border rounded-lg shadow-md bg-gray-50 w-lg">
              <h3 className="text-lg font-semibold text-blue-600">{title}</h3>
              <p className="text-xs text-gray-500">{description}</p>
              <div className="mt-2 p-2 bg-white border rounded text-lg text-black">
                <span>内容:</span>
                {content}
              </div>
            </div>
          );
        }
      }
    ),
    blockSignature: createReactBlockSpec(
      {
        type: "blockSignature",
        content: "none",
        propSchema: {
          id: {
            default: "signature-block"
          },
          name: {
            default: "签名"
          }
        }
      },
      {
        render: props => {
          const { name } = props.block.props;
          return (
            <div className="flex item-center justify-between p-2 border rounded shadow-md bg-gray-100">
              <span className="text-sm font-semibold text-gray-600">{name}</span>
            </div>
          );
        }
      }
    )
  },
  inlineContentSpecs: {
    ...defaultInlineContentSpecs,
    mention: createReactInlineContentSpec(
      {
        type: "mention",
        content: "none",
        propSchema: {
          id: {
            default: ""
          },
          name: {
            default: ""
          }
        }
      },
      {
        render: props => {
          const { id } = props.inlineContent.props;
          return <span className="text-blue-500 bg-amber-200">@{id}</span>;
        }
      }
    )
  },
  styleSpecs: {
    ...defaultStyleSpecs
  }
});

export function DocEditorDemo() {
  const editor = useCreateBlockNote({
    schema,
    dictionary: zh,
    initialContent: [
      {
        type: "blockSignature",
        props: {
          id: "signature-block-1",
          name: "签名"
        }
      },
      {
        type: "blockAI",
        props: {
          id: "ai-block-1",
          title: "AI Block 1",
          description: "这是第一个AI块的描述.",
          content: "AI生成的内容1"
        }
      },
      {
        type: "paragraph",
        content: [
          {
            type: "text",
            text: "这是一段测试段落，包括一个提及内容",
            styles: {}
          },
          {
            type: "mention",
            props: { id: "User123", name: "用户123" }
          }
        ]
      }
    ]
  });

  const getMentionUserItems = (e: typeof editor) => {
    const userItems: DefaultReactSuggestionItem[] = [
      {
        icon: <span>👤</span>,
        title: "用户123",
        onItemClick: () => {
          e.insertInlineContent([
            {
              type: "mention",
              props: { id: "User123", name: "用户123" }
            }
          ]);
        }
      },
      {
        icon: <span>👤</span>,
        title: "渡一用户123",
        onItemClick: () => {
          e.insertInlineContent([
            {
              type: "mention",
              props: { id: "User123", name: "用户123" }
            }
          ]);
        }
      }
    ];
    return userItems;
  };

  const insertBlockAI = (e: typeof editor) => {
    return {
      title: "AI助手",
      subtext: "为您提供智能建议",
      icon: <span>🤖</span>,
      onItemClick: () => {
        insertOrUpdateBlock(e, {
          type: "blockAI",
          props: {
            id: `ai-block-${Date.now()}`,
            title: "AI生成的标题",
            description: "AI生成的描述",
            content: "AI生成的内容"
          }
        });
      }
    };
  };

  const insertBlockSignature = (e: typeof editor) => {
    return {
      title: "签名",
      subtext: "为您提供签名块",
      icon: <span>✍️</span>,
      onItemClick: () => {
        insertOrUpdateBlock(e, {
          type: "blockSignature",
          props: {
            id: `signature-block-${Date.now()}`,
            name: "JACK"
          }
        });
      }
    };
  };

  return (
    <BlockNoteView editor={editor} slashMenu={false}>
      <SuggestionMenuController
        triggerCharacter="@"
        getItems={async query => {
          return filterSuggestionItems(getMentionUserItems(editor), query);
        }}
      />
      <SuggestionMenuController
        triggerCharacter="/"
        getItems={async query => {
          return filterSuggestionItems(
            [insertBlockSignature(editor), insertBlockAI(editor), ...getDefaultReactSlashMenuItems(editor)],
            query
          );
        }}
      />
    </BlockNoteView>
  );
}
